<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/css/theme-chalk-2.15.7.css" rel="stylesheet"/>
    <style>
        input[type='submit'] {
            display: block;
            width: 100%;
            padding: 0.5rem 0;
            border-radius: 4px;
            border: 1px solid blue;
            background-color: #86b7fe;
            color: white;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>全国四级行政区域实现地址选址</h1>
    <el-form :inline="true">
        <el-form-item label="选择区域：">
            <el-cascader :props="props" :options="options" v-model="address" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址：">
            <el-input style="width: 400px;" placeholder="详细地址" v-model="text" clearable></el-input>
        </el-form-item>
        <el-button type="primary" @click="showAddress">查看地址</el-button>
    </el-form>
</div>

<!--js脚本-->
<script src="/static/js/vue-2.6.14.min.js"></script>
<script src="/static/js/axios-0.26.js"></script>
<script src="/static/js/element-ui-2.15.7.js"></script>
<script>
    // 配置Axios，设置baseURL会自动拼接
    const axiosInstance = axios.create({
        baseURL: 'http://localhost:8088/api/', // http://localhost:8088/api/address/parent/0
        timeout: 3000,
        headers: {'X-Custom-Header': 'your-project'}
    })

    // 从缓存或者网络中获取全国地址的数据
    const getAddressFromCacheOrNetwork = pid => new Promise((resolve, reject) => {
        globalThis.cache = globalThis.cache || {}
        if (globalThis.cache[`${pid}`]) {
            resolve(globalThis.cache[`${pid}`])
            return
        }
        axiosInstance.get(`address/parent/${pid}`)
            .then(resp => {
                const data = resp.data
                globalThis.cache[`${pid}`] = data
                resolve(data)
            })
            .catch(err => reject(err))
    })

    new Vue({
        el: '#app',
        data: {
            text: '', // 最后的地址
            address: [], // 选中的地址
            options: [], // 选项，不需要配置
            props: {
                lazy: true,
                lazyLoad: function (node, resolve) {
                    console.log(node)
                    getAddressFromCacheOrNetwork(node.level === 0 ? 0 : node.data.id)
                        .then(data => resolve(data.map(v => ({
                            label: v.name, // 用名字或者全名做标签都可以
                            value: v.name, // 选中后返回值就用名字
                            id: v.id,      // 记录id，根据id查询子区域
                            leaf: node.level > 2, // 最后一级为3即叶子节点
                        }))))
                        .catch(err => resolve([]))
                },
            },
        },
        computed: {
            addressText: function () {
                return this.address.join('') + this.text
            },
        },
        methods: {
            showAddress: function () {
                this.$confirm(this.addressText, '确认信息')
                    .then()
                    .catch(e => {})
            },
        },
    });
</script>
</body>
</html>
